<template>
    <div  class="p-35-15">

        <div id="sdwrap" style="width: 100%;height:300px"></div>
      
    </div>

</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vux";

export default {
  props: ["obj", "colors"],
  name: "sevenDays",
  components: {
    Grid,
    GridItem
  },

  mounted() {
    this.ChartsdwrapDraw();
  },
  methods: {
    ChartsdwrapDraw() {
      var _this = this;
      var lamounts= _this.obj.week.amounts;
      var lcounts = _this.obj.week.counts;
    // var lamounts= [66,23,45,56,87,89,20];
    // var lcounts= [34,45,77,23,54,68,40];
      var Chartsdwrap = this.$echarts.init(document.getElementById("sdwrap"));
      Chartsdwrap.hideLoading();
      // 绘制图表
      Chartsdwrap.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["下单金额", "下单数量"]
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.obj.week.dates
        },
        yAxis: [
          {
            name: "单位：万元",
            type: "value"
          },
          {
            name: "单位：单",
            type: "value"
          }
        ],
        series: [
          {
            name: "下单金额",
            type: "line",
            smooth: true,
            yAxisIndex: 0,
            data:lamounts,
            label: {
              normal: {
                show: false,
                position: "bottom"
              }
            },
            itemStyle: {
              normal: {
                color: _this.colors[0],
                lineStyle: {      
                        width: 2
                    }
              }
            }
          },
          {
            name: "下单数量",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data:lcounts,
            label: {
              normal: {
                show: false,
                position: "top"
              }
            },
            itemStyle: {
              normal: {
                color: _this.colors[1],
                  lineStyle: {      
                        width: 2
                    }
              }
            }
          }
        ]
      });
    }
  }
};
</script>